<!--实际开发时请参考deev_M.vue-->
<template>
	<view class="page_all">
		<view class="page_titleArea">
			<view class="page_title_line">
				<view class="page_title_line_left" @click="leftClick()"><image src="../../static/all/back_white.png" style="width:50rpx;height:50rpx;"></image></view>
				<view class="page_title_line_middle">车辆选择</view>
				<view class="page_title_line_left"></view>
			</view>
		</view>
		<view class="page_contentArea" style="background-color:#F7F7F7;">
			<!--查询区域-->
			<view class="line_query_box"> 
				<view class="line_query_input">
					<uni-easyinput prefixIcon="search" v-model="form_query.license" 
												 :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入车牌" 
												 @iconClick="getCarList()"> 
					</uni-easyinput>
				</view>
			</view>
			<!--汽车数据区域-->
			
			<!--数据块开始-->
			<view class="list_car_box" style="position:relative;" v-for="(item,index) in carList" :key="index" @click="checkItem(index)">
				<view class="list_car_img"><image :src="item.pic" class="car_img"></image></view>
				<view class="list_car_info">
					<view class="list_car_info_line" style="font-size:30rpx;font-weight:900;">品牌：{{item.model}}</view>
					<view class="list_car_info_line">车牌号：{{item.license}}</view>
					<view class="list_car_info_line">换挡方式：{{item.transType}}</view>
					<view class="list_car_info_line">座位数：{{item.siteCount}}</view> 
				</view>
				<view class="list_car_status1" v-if="item.status=='空闲状态'">可选</view>
				<view class="list_car_status2" v-if="item.status!='空闲状态'">使用中</view>
				<view class="list_car_xuanzhong" v-if="item.text!=null"> <!--注意：这个判断变量不能是后加入的，必须是集合中的对象初始就有的属性-->
				<!-- <view class="list_car_xuanzhong"> -->
					<image src="../../static/list/xuanze.png" style="width:50rpx;height:50rpx;"></image>
				</view>
			</view>
			<!--数据块结束-->
			
			<!--提交按钮行-->
			<view class="space_80"></view>
			<view class="queren_btn" @click="setCar_select()">
				确<span style="padding:20rpx;"></span>认<span style="padding:20rpx;"></span>
				选<span style="padding:20rpx;"></span>择
			</view>
			<view class="space_80"></view>
		</view>
	</view>
</template>

<script>
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				//控件的样式
				placeholderStyle: "color:#A9A9A9;font-size:30rpx",
				styles: {
					disableColor: '#FFF',
					borderColor: '#87CEFA', //文本框边框颜色
				},
				//查询条件
				form_query: {
					license: '',
					getFreeCar: true,
					startDate: "",
					endDate: "",
					pageIndex:1,
					pageSize:1000,
				},
				carList:[], //汽车列表（查询结果集）
				is2122Used:false, //3067(21柜门)与0339（22柜门）这两辆车都是被占用状态
				is2122Exist:false, //是否存在这2辆车（用于测试部门）
				car_select: null,  //选车时被选中的车辆
				
				
				//测试时间段方式取车列表
				form_test: {
					license: "",  //津D-ML118
					getFreeCar: true,
					startDate: "2025-04-11 13:00:00",
					endDate: "2025-04-11 16:00:00",
					pageIndex:1,
					pageSize:1000,
				},
				//在此之上补充变量
			}
		},
		onLoad(option) {
			getApp().globalData.query_flag=0; //在子页面（提交成功后需要刷新父页面）中将刷新控制变量置为0
			//this.getCarList(); //原正式代码
			if(JSON.stringify(option)!="{}"){
				var sTime=option.startDate;
				console.log("真实开始时间==",sTime);
				var sTime_before30=utils.getBefore30(sTime);
				console.log("处理后的开始时间==",sTime_before30);
				
				//this.form_query.startDate=option.startDate;
				this.form_query.startDate=sTime_before30;
				this.form_query.endDate=option.endDate;
			}
			console.log("提交的参数中的时间段信息开始时间==",this.form_query.startDate,"  提交的参数中的时间段信息截止时间==",this.form_query.endDate);
			this.getCarListNew();
		},
		methods: {
			/******************************以下是通用方法*********************************/
			temp(){},
			//顶部导航回退箭头点击触发
			leftClick(){
				utils.pageBack();
			},
			//隐藏系统键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			/******************************以上是通用方法*********************************/
			
			/************************以下是车查询与选择相关方法****************************/
			getCarList(){ //原逻辑方法
				var that=this;
				var is21Used=false;
				var is22Used=false;
				that.carList=[]; //查询结果集初始化
				console.log("查询车列表的参数==",that.form_query);
				utils.getCarList(that.form_query).then(res => {
					console.log('根据条件查询汽车列表返回值==',res); 
					if(res.data.status=="success"){
						that.carList=res.data.rows;
						//用于判断是否已选择车的变量text，初始值就是null，这里不用处理
						
						//用于判断21与22号柜门的两辆车是否属于空闲状态
						for(var i=0;i<that.carList.length;i++){
							if(that.carList[i].license=="津AG63067"){ //21号柜门车
								that.is2122Exist=true; //表示存在这两辆车
								if(that.carList[i].status!="空闲状态"){
									is21Used=true;
								}
							}
							if(that.carList[i].license=="津AG60339"){ //22号柜门车
								that.is2122Exist=true; //表示存在这两辆车
								if(that.carList[i].status!="空闲状态"){
									is22Used=true;
								}
							}
						}
						if(is21Used&&is22Used){
							that.is2122Used=true;
						}
						//以上用于判断21与22号柜门的两辆车是否属于空闲状态
					}
					if(res.data.status=="error"){
						let msg=res.data.message;
						uni.navigateTo({
							url:'/pages/error/error?errorMsg='+msg 
						})
					}
				}).catch(error => {
					uni.navigateTo({
						url:'/pages/error/error?errorMsg='+error
					})
				})
			},
			
			getCarListNew(){
				var that=this;
				that.carList=[]; //查询结果集初始化
				console.log("查询车列表的参数==",that.form_query);
				utils.getCarList(that.form_query).then(res => {
					console.log('根据条件查询汽车列表返回值==',res); 
					if(res.data.status=="success"){
						that.carList=res.data.rows;
					}
					if(res.data.status=="error"){
						let msg=res.data.message;
						uni.navigateTo({
							url:'/pages/error/error?errorMsg='+msg 
						})
					}
				}).catch(error => {
					uni.navigateTo({
						url:'/pages/error/error?errorMsg='+error
					})
				})
			},
			
			//选车点击事件（在行数据上点击）
			checkItem(index) {
				var that=this;
				console.log('当前选中索引',index);
				var tt=that.carList[index]; //变量 tt == 数组每一项索引
				if(tt.text!=null){ //如果已经是选中状态（text的值是“已选”）
					//提示：您已经选择了这辆车，然后return
					uni.showToast({
						title:'当前已选该车',
						icon: 'success',
						duration:2000,
					});
					return;
				}else{ //如果是未选中状态
					//选择提示框提示“是否选择这辆车”
					uni.showModal({
						title: '提示',
						content: '是否选择这辆车？',
						success:function(res){
							if(res.confirm){ //执行确认后的操作
								//如果确定的话，则先将当前carList中每一项的text置为null，
								for(var i=0;i<that.carList.length;i++){
									that.carList[i].text=null;
								}
								tt.text="已选";
								that.car_select=tt; //将tt赋值给that.car_select
							}else {
								//如果选择取消的话，直接return
								return;
							}
						}
					}) //uni.showModal结束
				}
			},
			//点击确定按钮后，生成qiyeList_finally
			setCar_select(){
				let that=this;
				//1：判读是否已选择车辆
				if(that.car_select==null){
					uni.showModal({
						title: '提示',
						content: '您尚未选车，请选车后再点击确认按钮！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				//2:选择的车辆经确认后，赋值给全局变量getApp().globalData.car_select
				uni.showModal({
						title: '提示',
						content: '确定选择车牌号为：'+that.car_select.license+'的车辆吗？',
						success: function(res) {
							if (res.confirm) {
								//执行确认后的操作
								getApp().globalData.car_select=null; //先初始化全局变量
								getApp().globalData.car_select=that.car_select; //再将选中的车赋值给全局变量
								console.log("当前的全局car_select==",getApp().globalData.car_select);
								//返回到上一页（创建项目主页面）
								utils.pageBack();
							} 
							else {
								//执行取消后的操作
							}
						}
					})
					//uni.showModal结束
				
			},
			/************************以上是车查询与选择相关方法****************************/
			

			
			/*********************在此之上补充方法**********************/
		},
	}
</script>

<style lang="scss">
@import '../../common/css/page.css'; 
@import '../../common/css/list.css';

</style>